<!--
 作者 : 唐梓元
 日期 : 2019-9-2
 版本 : 1.0
 描述 :错误或者提醒弹出框，有取消和确定两个选项，点击取消就隐藏，点击确定就做判断
 使用 :    this.$confirm({
                type:'提示2',
                msg:'是否删除这条信息45465？',
                btn:{
                  ok:'yes',
                  no:'no'
                }
              }).then(() => {
                console.log('ok54354')
              })
                .catch(() => {
                  console.log('no35434')
                })

 -->
<template>
  <div class="mui-content" v-if="isShow">
    <transition name="fade">
      <div class="myRating" >
        <div class="ratContent">
          <div class="title">{{text.type}}</div>
          <div class="msg">
            {{text.msg}}
          </div>

          <div class="foot f" >
            <button class="f1" v-if="text.btn.no" :class="mousedown1?'mouseDown':''" @click="close"  @mousedown="def_mousedown(1)" @mouseleave="def_mouseleave(1)">取消</button>
            <button class="f1" v-if="text.btn.ok"  :class="mousedown2?'mouseDown':''"   @mousedown="def_mousedown(2)" @mouseleave="def_mouseleave(2)" @click="ok">确定</button>
          </div>
        </div>
      </div>
    </transition>
  </div>

</template>

<script>


  export default {
    name: "Prompt.vue",
    data(){
      return{
        mousedown1:false,
        mousedown2:false,
        isShow:true,
        text:{

          type:'提示',
          msg:'提示信息',
          btn:{
            ok:'确定',
            no:'取消'
          },
        }

      }

    },
    created(){

    },
    methods:{
      ok(){
        console.log('queding');
      },
      close(){
        this.$emit("no")
      },
      def_mousedown(index){
        if(index==1){
          this.mousedown1=true
        }else {
          this.mousedown2=true
        }

      },
      def_mouseleave(index){
        if(index==1){
          this.mousedown1=false
        }else {
          this.mousedown2=false
        }
      }
    }
  }

</script>

<style scoped>
  .mouseDown{
    background-color: #f2f2f2 !important;
  }
  .mui-content .myRating{
    position: fixed;
    width: 100%;
    height: 100%;
    background-color:rgba(111,111,111,0.8);
    left: 0;
    top:0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;

  }
  .mui-content .myRating .ratContent{
    width: 18rem;
    min-height: 9.5rem;
    background-color: white;
    line-height: 100%;
    text-align: center;
    border-radius: 4px;
    position: relative;
  }
  .mui-content .myRating .ratContent .title{
    height:3rem;
    line-height: 3.9rem;
    font-size: 1.2rem;
    color: black;
  }

  .mui-content .msg{
    padding-left: 1rem;
    width: 17rem;
    min-height: 3.5rem;
    line-height: 1.5rem;
    padding-bottom: 3rem;
    overflow: hidden;
    font-size: 0.9rem;
    color: #8f8f94;
  }
  .mui-content .myRating .ratContent .foot{
    position: absolute;
    bottom: 0;
    width: 100%;
  }
  .mui-content .myRating .ratContent .foot button{
    float: left;
    width: 100%;
    text-align: center;
    border:none;
    border-top: 1px solid rgba(111,111,111,0.2);
    height: 2.8rem;
    line-height: 2.8rem;
    color: #6bff53;
    position: relative;
    font-size: 0.9rem;
    margin-top: -5px;
    cursor: pointer;
    background: transparent;
outline: none;
  }
  .mui-content .myRating .ratContent .foot button:hover{
    color: #57bbfa;
    cursor: pointer;
    text-decoration:underline
  }
  .mui-content .myRating .ratContent .foot button:first-child:after{
    content: '';
    position: absolute;
    right: -1px;
    top: 28%;
    left: auto;
    bottom: auto;
    width: 1px;
    height: 44%;
    background-color: #9e9e9e;
    display: block;
    z-index: 15;
    -webkit-transform-origin: 100% 50%;
    transform-origin: 100% 50%;
  }


</style>
